<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>抽奖</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.common.dev.js"></script>
  </head>
  <style>
    .cover-wrap{
      background: rgba(0, 0, 0, 0.5);
      position: fixed;
      left: 0;
      top: 0;
      height: 100vh;
      width: 100vw;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .modal-wrap{
      background: chartreuse;
      padding: 10px;
      min-width: 40vw;
    }
    .top{
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #ddd;
    }
    .content{
      min-height: 100px;
      border-bottom: 1px solid #ddd;
    }
    .footer{
      padding: 10px 0;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }

  </style>
  <body>
    <div id="root">
      <button @click="onLuckDraw">抽奖</button>
      <modal 
        :is-show="showModal" 
        :handle-cancel="handleCancel" 
        :handle-enter="handleEnter"
        title="抽奖！"
        :content="student"

      ></modal>
    </div>
    <template id="modal">
      <div class="cover-wrap" v-if="isShow">
          <div class="modal-wrap">
            <div class="top">
              <div>{{title}}</div>
              <div @click="handleCancel">X</div>
            </div>
            <div class="content">{{content}}</div>
            <div class="footer">
              <button @click="handleCancel(msg)">取消</button>
              <button @click="handleEnter">确认</button>
            </div>
          </div>
       </div>
 </template>
    <script>
      // 默认学生list
      const DEFAULT_STUDENT_LIST = [
        "左雨鑫 ",
        "常嘉伦 ",
        "贾子陈 ",
        "孟梦 ",
        "刘卓超 ",
        "孟峰",
        "刘嘉扬 ",
        "刘乾扛 ",
        "赵文静 ",
        "赵淑慧 ",
        "李玉娇",
        "吴限 ",
        "陈壮志 ",
        "杨长赫 ",
        "丁亦轩 ",
        "李水鹏 ",
        "裴双恒",
        "常明 ",
        "袁菡 ",
        "张江荣 ",
        "刘晓虎 ",
        "张乔阳 ",
        "张莹琪 ",
        "赵小侠",
        "王惠民 ",
        "郭锦绣 ",
        "杨烨红 ",
        "路硕",
        "郭勇岐 ",
        "石广泽 ",
        "陈宇濠 ",
        "李海波 ",
        "魏新柯",
        "马建行 ",
        "张齐 ",
        "崔潇航 ",
        "梁嘉琳 ",
        "张佳玉 ",
        "郭雪敏",
        "张帅航 ",
        "杨凤可 ",
        "彭丹枫 ",
        "刘茗莉",
      ];
      // 获取学生列表的方法
      const getStudentList = () => {
        const localStudentList = localStorage.getItem("studentList");
        let studentList;
        if (!localStudentList) {
          studentList = DEFAULT_STUDENT_LIST;
        } else {
          studentList = JSON.parse(localStudentList);
        }
        return studentList;
      };

      /**
       * @desc: 定义通用弹窗组件Modal
       * @props
       *   - isShow: boolean 控制弹窗是否弹出
       *   - title: string 展示的标题
       *   - content: string 展示的内容
       *   - handleCancel: function 点击取消和X的回调
       *   - handleEnter: function 点击确认的回调
       * **/
      Vue.component('modal', {
        template: '#modal',
        props: {
          isShow: {
            type: Boolean,
            default: false,
            required: false,
          },
          title: {
            type: String,
            default: '123',
            required: false,
          },
          content: {
            type: String,
            default: '',
            required: false,
          },
          handleCancel: {
            default: ()=>{}
          },
          handleEnter: {
            default: ()=>{}
          }
        },
      })


      //  业务-抽奖
      new Vue({
        el: "#root",
        methods: {
          // 抽奖
          radom: function(){
            const students = getStudentList();
            return students[parseInt(Math.random()*students.length)];
          },
          onLuckDraw: function () {
            this.student = this.radom();
            this.showModal = true;
          },
          handleCancel: function(data){
            this.showModal = false
          },
          handleEnter: function(){
            this.showModal = false;
            const students = getStudentList();
            const index = students.findIndex(item => item === this.student);
            students.splice(index, 1);
            localStorage.setItem('studentList', JSON.stringify(students));
          }
        },
        data: {
          showModal: false,
          student: '',
        }
      });
    </script>
  </body>
</html>
